<template>
  <div class="interface-manager">
    <el-row>
      <el-col :span="5">
        <interfaceGroup></interfaceGroup>
      </el-col>
      <el-col :span="19">
        <div class="interface-content">
          <div>
            <h3 class="interface-title">接口数【{{ this.total }}】个</h3>
            <addInterface v-on:getinterface="getinterface" ref="addInterface"></addInterface>
          </div>
          <el-input placeholder="输入接口id进行查询" v-model="filterText" style="width:350px;padding-left:5px;padding-top:10px"></el-input>
          <div>
            <el-table :data="interfaceSimpleList" border style="width: 100%" stripe height="550" :row-class-name="tableRowClassName" :cell-style="rowStyle"
                      :header-cell-style="tableHeaderCellStyle">
              <el-table-column type="index" label="编号" fixed width="100">
              </el-table-column>
              <el-table-column prop="name" sortable label="接口名" width="200" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="path" sortable label="路径" width="300" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>
                    <el-tag v-if="scope.row.method==='GET'" size="small">{{ scope.row.method }}</el-tag>
                    <el-tag v-if="scope.row.method==='POST'" size="small" type="success">{{ scope.row.method }}</el-tag>
                    <el-tag v-if="scope.row.method==='PUT'" size="small" type="danger">{{ scope.row.method }}</el-tag>
                    <el-tag v-if="scope.row.method==='DELETE'" size="small" type="warning">{{ scope.row.method }}</el-tag>
                    <span style="letter-spacing: 1px;color: #65c294">{{scope.row.path}}</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="groupName" label="接口分组" width="200" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="author" label="添加人" width="120" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="updateTime" sortable label="更新时间" width="200" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span><i class="el-icon-time"></i> {{scope.row.updateTime}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="操作" fixed='right' :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <router-link :to="{  path:`/interface/${scope.row.id}`, params: {interfaceId: scope.row.id}}">
                    <el-button type="success" icon="el-icon-edit" size="mini" circle></el-button>
                  </router-link>
                  <span>&nbsp;</span>
                  <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="deleteInterface(scope.row.id)"></el-button>
                  <el-button type="warning" icon="el-icon-star-off" size="mini" circle ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="padding-top:10px;float:right">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {addApi, getApi, deleteApi} from '@/api/api'
import {getGroupById} from '@/api/group'
import interfaceGroup from './interfaceGroup.vue'
import addInterface from './addInterface.vue'

export default {
  data() {
    return {
      projectId: 0,
      apiGroupId: '',
      filterText: '',
      currentPage: 1,
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      interfaceSimpleList: [],
      groupName: ''
    }
  },

  methods: {

    rowStyle() {
    },

    // 修改 table header cell的背景色
    tableHeaderCellStyle() {
      return 'background-color: rgb(84, 92, 100)'
    },
    //获取接口信息
    getinterface(apiGroupId, pageIndex, pageSize) {
      this.interfaceSimpleList = []
      getApi(apiGroupId, pageIndex, pageSize).then(resp => {
        if (resp.code === 200) {
          const interfaceList = resp.data.list
          this.total = resp.data.total
          getGroupById(interfaceList[0].apiGroupId).then(resp => {
            this.groupName = resp.data.name
            for (let i = 0; i < interfaceList.length; i++) {
              interfaceList[i]['groupName'] = this.groupName
              this.interfaceSimpleList.push(interfaceList[i])
            }
          })
        }
      })
    },

    //删除接口信息
    deleteInterface(id) {
      this.$confirm('此操作将永久删除该接口, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteApi(id).then(resp => {
          if (resp.code === 200) {
            this.$message({
              type: '删除成功',
              message: resp.message
            });
            this.getinterface(1, this.pageIndex, this.pageSize)
          } else {
            this.$message({
              type: 'warning',
              message: resp.message
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //编辑接口
    editInterface(from) {
    },
    tableRowClassName(row) {
    },
    //跳转
    handleCurrentChange(val) {
      console.log(val)
      this.currentPage = val
      this.getinterface(this.apiGroupId, val, this.pageSize)
    },
    //页大小
    handleSizeChange(val) {
      this.getinterface(this.projectId, this.pageIndex, val)
    },
  },

  mounted() {
    this.getinterface(this.apiGroupId, this.pageIndex, this.pageSize)

    // console.log(this.projectId)
    //
    // if (! this.$store.state.projectId){
    //   this.$message({
    //     type: "info",
    //     message: "请选择项目"
    //   })
    //   this.$router.push("/project")
    //   return;
    // }
  },

  // watch: {
  //   '$store.state.projectId'() {
  //     this.projectId = this.$store.state.projectId
  //   }
  // },

  components: {
    interfaceGroup,
    addInterface
  },
}
</script>

<style scoped>
.interface-manager {
  background-color: #eff0f4;
  height: 100%;
  padding: 2px 2px 50px;
}

.interface-content {
  margin-left: 3px;
  background-color: #fff;
  height: 100%;
}
.interface-title {
  clear: both;
  font-weight: 600;
  border-left: 3px solid #2395f1;
  padding-left: 8px;
  margin: 0;
  padding-top: 3px;
  padding-bottom: 3px;
}


.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #26eeb5;
}

.interface-manager >>> .el-table .el-table__cell {
  padding: 10px 0;
}
</style>
